<template>
	<view class="container">
		<view>
			<view class="form">
				<span>
					<view class="conwrap no-bg">
						<view class="cu-form-group">
							<input v-model="form.code" class="uni-input-input" type="text" placeholder="sms code" />
							<view class="text-white" @click="getVerificationCode">{{clock_txt}}</view>
						</view>
						<view class="cu-form-group">
							<input
								v-model="form.login_pwd"
								class="uni-input-input"
								type="text"
								password
								placeholder="Please set a new password"
							/>
						</view>
						<view class="cu-form-group">
							<input
								v-model="form.c_login_pwd"
								class="uni-input-input"
								type="text"
								password
								placeholder="Please confirm new password"
							/>
						</view>
					</view>
					<ZAlterDrawPwButton label="Confirm" @click="handleAlterDrawPw" />
				</span>
			</view>
		</view>
	</view>
</template>
<script>
import ZAlterDrawPwButton from './components/ZAlterDrawPwButton.vue';
import { uniNavBar } from '@dcloudio/uni-ui';
import common from '@/mixin/common.js';
import fetch from '@/common/fetch.js';
export default {
	components: {
		ZAlterDrawPwButton,
		uniNavBar
	},
	mixins: [common],
	data() {
		return {
			form: {
				code: '',
				login_pwd: '',
				c_login_pwd: ''
			},
			clock: 60,
			clock_txt: 'get verification code',
			invite_codeClocker: null,
			info: {
				login_pwd: 'Please enter a new password',
				c_login_pwd: 'Please confirm new password',
				code: 'please enter verification code'
			},
			current: {
				title: ''
			}
		};
	},
	methods: {
		getVerificationCode() {
			if (this.clock == 60) {
				fetch
					.request(
						'/index/index/sendMyMobile',
						{
							mobile: this.form.mobile
						},
						'POST',
						true,
						true
					)
					.then(res => {
						if (res.code === '0' || res.code === 0) {
							console.log(res);
							uni.showToast({
								icon: 'none',
								mask: true,
								title: res.data,
								duration: 2000
							});
							this.invite_codeClocker = setInterval(() => {
								if (this.clock <= 0) {
									this.clock_txt = 'Get verification';
									this.clock = 60;
									clearInterval(this.invite_codeClocker);
								} else {
									this.clock--;
									this.clock_txt = this.clock;
								}
							}, 1000);
						}
					});
			}
		},
		handleBack() {
			uni.navigateBack();
		},
		handleAlterDrawPw() {
			if (this.vaild(this.form, this.info)) {
				if (this.form.login_pwd !== this.form.c_login_pwd) {
					uni.showToast({
						title: 'The new password entered twice is inconsistent',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				fetch.request('/index/ucenter/changePaypswd', this.form, 'POST').then(res => {
					if (res.code === 0 || res.code === '0') {
						uni.showToast({
							title: 'Successfully modified',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 2100);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.conwrap.no-bg .cu-form-group {
	background: none;
	padding: 0;
}
.cu-form-group {
	border-bottom: 1px solid #ccc;
	border-top: none;
	padding-left: 0;
	padding-right: 0;
}
.form {
	.text-white {
		color: #555555;
	}
	.cu-form-group {
		input {
			color: #555;
		}
	}
	/deep/ .bg-blue-trans {
		background-color: rgb(245, 61, 70);
		color: #fff;
	}
}
</style>
